@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;
@use '../../../scss/gio-layout' as gio-layout;

$typography: map.get(gio.$mat-theme, typography);

:host {
  @include gio-layout.gio-responsive-margin-container;
}

.deployment-configuration {
  &__header,
  &__content {
    padding: 20px 24px;
  }

  &__header {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid map.get(gio.$mat-dove-palette, darker10);

    &__title {
      @include mat.typography-level($typography, 'subtitle-1');
    }

    &__subtitle {
      @include mat.typography-level($typography, 'body-2');
      color: mat.get-color-from-palette(gio.$mat-space-palette, 'lighter40');
    }
  }

  &__form-field {
    width: 100%;

    &__label {
      @include mat.typography-level($typography, 'body-2');
    }

    &__description {
      @include mat.typography-level($typography, 'body-2');
      color: mat.get-color-from-palette(gio.$mat-space-palette, 'lighter40');
      margin-bottom: 24px;
    }
  }
}
